<template>
  <div class="swiper-container1">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="item in page" :key="item.id">
        <a class="icon-item" v-for="page in item" :key="page.id">
          <img :src="page.url" class="iconImg" />
          <p class="text-hidden">{{ page.title }}</p>
        </a>
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from 'swiper'
import '../../assets/css/common.css'
export default {
  props: ['iconUrl'],
  data() {
    return {}
  },
  computed: {
    page() {
      const itUrl = []
      this.iconUrl.forEach((item, index) => {
        const ind = Math.floor(index / 8)
        if (!itUrl[ind]) itUrl[ind] = []
        itUrl[ind].push(item)
      })

      return itUrl
    }
  },
  mounted() {
    /* eslint-disable no-new */
    new Swiper('.swiper-container1', {
      observer: true
    })
  }
}
</script>

<style lang="less" scoped>
.icon-item {
  display: flex;
  display: block;
  flex-direction: column;
  width: 25%;
  float: left;
  text-align: center;
  .iconImg {
    display: block;
    height: 1.4rem;
    width: 1.4rem;
    padding-bottom: 0.1rem;
    padding-top: 0.2rem;
    margin: 0 auto;
  }
  p {
    font-size: 0.4rem;
  }
}
.swiper-container1 {
  height: 4.5rem;
  width: 100%;
  overflow: hidden;
  background-color: #fff;
}
</style>
